<template>
  <star-horse-dialog
      :title = "'编辑快捷菜单'"
      :visible = "shortcutVisible" @merge = "batchMerge">
    <el-table
        :data = "permissionMenuList"
        :row-key = "rowClassName"
        @select-all = "handleSelectAll"
        @selection-change = "handleSelectionChange"
        border
        stripe = "true"
        fit = "true"
        highlight-current-row = "true"
        ref = "shortcutMultipleTable"
    >
      <el-table-column
          :reserve-selection = "true"
          align = "center"
          fixed = "left"
          type = "selection"
      />
      <el-table-column
          label = "菜单名称"
          prop = "menuName"
      />
    </el-table>
  </star-horse-dialog>
  <star-horse-dialog :visible = "permissionVisible" :title = "'个人权限'">

  </star-horse-dialog>
  <star-horse-dialog :visible = "dialogPwdVisible" :title = "'个人信息'" @merge = "editUserInfo" @reset = "resetForm">
    <el-form :model = "ruleForm" :rules = "rules" class = "demo-ruleForm" label-position = "labelPosition"
             label-width = "120px"
             ref = "ruleForm">
      <el-row>
        <el-col :span = "12">
          <el-form-item label = "工号" prop = "employeeNo"
                        v-if = "!false">
            {{ ruleForm.employeeNo }}
          </el-form-item>
        </el-col>
        <el-col :span = "12">
          <el-form-item label = "用户名" prop = "username"
                        v-if = "!false">
            {{ ruleForm.username }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label = "联系电话" prop = "phone"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入联系电话"
                  v-model = "ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label = "原始密码" prop = "oldPassword"
                    required v-if = "!false">
        <el-input clearable placeholder = "请输入原始密码" type = "password"
                  v-model = "ruleForm.oldPassword"></el-input>
      </el-form-item>

      <el-form-item label = "新密码" prop = "password" required
                    v-if = "!false">
        <el-input clearable placeholder = "请输入新密码" type = "password"
                  v-model = "ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label = "确认密码" prop = "rePassword" required v-if = "!false">
        <el-input clearable placeholder = "请输入新确认" type = "password"
                  v-model = "ruleForm.rePassword"></el-input>
      </el-form-item>


    </el-form>
  </star-horse-dialog>
  <div class = "header">
    <div :title = "systemName" class = "logo">
      <!-- <user-icon icon="star" style="vertical-align:middle;color: #e3e9f2;"/>
       <user-icon icon="horse" style="vertical-align:middle;color: #e3e9f2;font-size: 22px"/>-->
    </div>

    <div class = "header-left">

      <star-horse-hmenu/>
    </div>

    <div class = "header-right">
      <div class = "search">
        <!--  <el-input placeholder="请输入关键字" v-model="keyword" v-on:keyup.enter="operSearch">
              <template #prefix>
                  <el-icon>
                      <search/>
                  </el-icon>
              </template>
          </el-input>-->
      </div>
      <div class = "user-info">
        <!-- <span style="width: 40%; float: left;padding-top:2px;">
             <user-icon icon="bullhorn" style="vertical-align:middle;color: #e3e9f2;font-size: 22px"/>
             <el-badge :value="1" class="mark"/>
          </span>-->

        <el-dropdown trigger = "click">
    <span class = "el-dropdown-link">
      <user-icon icon = "user-tie" style = "vertical-align:middle;color: #e3e9f2;font-size: 28px"/>
    </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item style = "border-bottom: 1px silver solid">
                <span>{{ this.loginUser.name }}</span>
                <p>({{ this.loginUser.username }})</p>
              </el-dropdown-item>
              <!--              <el-dropdown-item class="clearfix" @click="permissionEdit">
                              <user-icon icon="shield-alt"/>
                              个人权限
                            </el-dropdown-item>-->
              <el-dropdown-item class = "clearfix" @click = "modifyInfo">
                <user-icon icon = "user-edit"/>
                修改个人信息
              </el-dropdown-item>
              <el-dropdown-item @click = "loginOut" class = "clearfix">
                <user-icon icon = "sign-out-alt"/>
                退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <div style = "clear: both"></div>
  <div class = "shortcut">
    <ul class = "shortcut_ul">
      <li @click = "menuBarFun" title = "展开/隐藏菜单">
        <user-icon :icon = "menuIcon"/>
      </li>
      <template v-for = "item in shortcutMenuList">
        <li :title = "item.menuName">
          <router-link :to = "{path:item.menuPath}">{{ item.menuName }}</router-link>
        </li>
        <li style = "width: 1px;cursor: none;color: #707070">|</li>
      </template>

      <li @click = "addShortcutMenu" title = "添加快捷菜单">
        <user-icon icon = "plus"/>
      </li>
    </ul>
  </div>
</template>

<script>
import {ref} from "vue"
import {mapGetters} from "vuex";
import {getUserInfo} from "../utils/auth";
import Config from "../settings"
import {postRequest, pwdMerge, userLogout} from "../api/star_horse";
import {confirm, error, success, warning} from "../utils/message";

import StarHorseHmenu from "@/components/comp/StarHorseHmenu";

export default {
  name: "AppHeader",
  props: ["isCollapse"],
  components: {StarHorseHmenu},
  computed: {
    ...mapGetters(["getUserInfo", "getPermissionMenus"])
  },
  data() {
    const systemList = ref([]);
    return {
      keyword: ref(''),
      menuIcon: "angle-double-left",
      systemList,
      permissionMenuList: [],
      shortcutMenuList: [],
      multipleSelection: [],
      shortcutVisible: false,
      permissionVisible: false,
      dialogPwdVisible: false,
      systemName: Config.title,
      loginUser: getUserInfo(),
      ruleForm: {},
      rules: {
        phone: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        oldPassword: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        password: [{required: true, message: "必选项不能为空", trigger: "blur"}],
        rePassword: [{required: true, message: "必选项不能为空", trigger: "blur"}]
      }
    }
  },

  created() {
    this.loadShortMenu();
  },
  methods: {
    resetForm() {
      let _this = this;
      this.ruleForm = {
        username: _this.loginUser.username,
        employeeNo: _this.loginUser.employeeNo,
        phone: _this.loginUser.phone
      };
    },
    editUserInfo() {
      let _this = this;
      pwdMerge(_this);
    },
    loadShortMenu() {
      let param = [], that = this;
      param.push({
        "propertyName": "idUsersinfo",
        "value": that.loginUser.idUsersinfo,
      })
      postRequest("system-config/system/shortcutMenu/getAllByCondition", param).then(res => {
        that.shortcutMenuList = res?.data?.data;
      }).catch(err => {
        console.log(err);
      })
    },
    batchMerge() {
      let that = this;
      let dataList = [];
      if (that.multipleSelection) {
        that.multipleSelection.forEach(item => {
          dataList.push({
            idUsersinfo: that.loginUser?.idUsersinfo,
            menuName: item.menuName,
            menuPath: item.menuPath
          });
        })
      }
      if (dataList.length > 10) {
        warning("最多只能设置10个快捷菜单");
        return;
      }
      postRequest(`/system-config/system/shortcutMenu/mergeBatch/${that.loginUser.idUsersinfo}`, dataList).then(res => {
        success(res.data.cnMessage);
        that.shortcutVisible = !that.shortcutVisible;
        that.multipleSelection = [];
        that.loadShortMenu();
      }).catch(err => {
        error(err);
      }).finally(() => {
        // that.closeLoad();
      })
    },
    //处理全部选中
    handleSelectAll(val) {
      this.multipleSelection = val;
    },
    //处理选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    rowClassName(row) {
      return row.menuPath;
    },
    recallFun(that, datas) {
      datas.forEach(item => {
        if (item.children.length > 0) {
          that.recallFun(that, item.children);
        } else {
          that.permissionMenuList.push({
            menuName: item.meta.title,
            menuPath: item.path
          })
        }
      });
    },
    addShortcutMenu() {
      let that = this;
      that.shortcutVisible = !that.shortcutVisible;
      let datas = that.getPermissionMenus;
      that.permissionMenuList = [];
      that.recallFun(that, datas);
      //在手动设置选中前,一定要先做清除选中,否则会出现很多重复被选中的情况
      that.$refs.shortcutMultipleTable?.clearSelection();
      that.shortcutMenuList.forEach(item => {
        that.$refs.shortcutMultipleTable?.toggleRowSelection(item, true);
      });


    },

    permissionEdit() {
      this.permissionVisible = !this.permissionVisible;
    },
    modifyInfo() {
      this.resetForm();
      this.dialogPwdVisible = !this.dialogPwdVisible;
    },
    loginOut() {
      let that = this;
      confirm("是否确认退出系统?", function (re) {
        if (re) {
          that.$store.dispatch("removeAll");
          userLogout(that.userInfo || {});
        }
      });

    },
    menuBarFun() {
      this.$emit('collopseOperation');
    },
    changeArrow() {
      this.menuIcon = this.menuIcon == "angle-double-right" ? "angle-double-left" : "angle-double-right";
    },

    operSearch() {
      alert(this.keyword);
    }
  },
  watch: {
    isCollapse: function (val) {
      this.changeArrow();
    }
  }
}
</script>

<style scoped>
.el-avatar {
  margin-top: -10px;
}

.el-icon {
  font-size: 22px;
  margin: 3px auto;
}

.header {
  height: 50px;
  width: 100%;
  background: #409eff;
  /*padding: 16px 36px 15px 30px;*/
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: row;
  flex: 1;
}

.header .header-left {
  width: 65%;
  height: 100%;
}

.header .header-left ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
  margin-left: 0px;
  padding-left: 0px;
}


.header .header-left ul li span {
  color: #f7f7f7;
}

.header .header-right {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

::v-deep .el-input--prefix .el-input__inner {

}

.header .header-right .search {
  width: 55%;
}

.el-dropdown-menu > .el-dropdown-menu__item:first-child {
  border-bottom: 1px solid silver;
}

.header .header-right .user-info {
  width: 43%;
  text-align: right;
  cursor: pointer;
}

.shortcut {
  height: 40px;
  background: #3a8ee6;
  -webkit-box-shadow: 0 2px 10px 0 rgba(75, 61, 89, 0.3);
  box-shadow: 0 2px 10px 0 rgba(75, 61, 89, 0.3);
  border-top: 1px solid hsla(13, 23%, 73%, 10);
  box-sizing: border-box;
}

.shortcut_ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  text-align: left;
  margin-left: 0px;
  padding-left: 0px;
}

.shortcut_ul li {
  display: block;
  vertical-align: middle;
  font-size: 14px;
  cursor: pointer;
  color: #ffffff;
  padding-top: 8px;
  margin-left: 15px;
  text-align: center;
  height: inherit;
}

.shortcut_ul li > a {
  float: left;
  display: block;
  vertical-align: middle;
  font-size: 14px;
  cursor: pointer;
  color: #ffffff;
  text-align: center;
  height: inherit;
}

/* .shortcut_ul li{background:linear-gradient(to top,#dd2926,#a82724,#dd2926) no-repeat right / 2px 30px;}*/

.shortcut_ul li:first-child {
  font-size: 23px;
  color: #ffffff;
  margin-left: 0px;
  box-shadow: 0 2px 10px 0 rgba(75, 61, 89, .3);
  box-sizing: border-box;
  padding-top: 5px;
  width: 50px;
}

.shortcut_ul li:last-child {
  font-size: 18px;
  color: #e3e9f2;
  box-shadow: 0 2px 10px 0 rgba(75, 61, 89, .3);
  box-sizing: border-box;
  padding-top: 8px;
}
</style>